<template>
  <div>
    <el-table :data="tableData" border style="width: 900px">
      <el-table-column label="操作人" width="180">
        <template #default="scope">{{ scope.row.createBy }}</template>
      </el-table-column>
      <el-table-column label="合并时间" width="180">
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="是否强制合并" width="180">
        <template #default="scope">{{
          scope.row.forceStatus ? scope.row.forceStatus == 0 ? '非强制' : scope.row.forceStatus == 1 ? '强制' : ''
            : '' }}</template>
      </el-table-column>
      <el-table-column label="合并数量" width="180">
        <template #default="scope">{{ scope.row.mergeNum }}</template>
      </el-table-column>
      <el-table-column label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="lookMergeLog(scope.row)">
            查看合并SKU列表
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <div class="dilog">
    <el-dialog v-model="dialogVisible" width="1000" style="height: 600px;">
      <span>
        <el-table :data="tableDatas" border style="width: 900px" max-height="560">
          <el-table-column label="SKU图片">
            <template #default="scope">
              <el-image style="width: 40px; height: 40px" :src="scope.row.skuPicture" fit="fill" />
            </template>
          </el-table-column>
          <el-table-column label="产品类型">
            <template #default="scope">{{ scope.row.typeName }}</template>
          </el-table-column>
          <el-table-column label="产品分类">
            <template #default="scope">{{ scope.row.classify }}</template>
          </el-table-column>
          <el-table-column label="所在仓库">
            <template #default="scope">{{ scope.row.warehouseName }}</template>
          </el-table-column>
          <el-table-column label="归属公司">
            <template #default="scope">{{ scope.row.company }}</template>
          </el-table-column>
          <el-table-column label="公司商品ID">
            <template #default="scope">{{ scope.row.companyGoodId }}</template>
          </el-table-column>
          <el-table-column label="店铺商品ID">
            <template #default="scope">{{ scope.row.shopGoodId }}</template>
          </el-table-column>
          <el-table-column label="店铺SKUID">
            <template #default="scope">{{ scope.row.shopGoodSkuId }}</template>
          </el-table-column>
          <el-table-column label="SKU信息">
            <template #default="scope">{{ scope.row.skuInfo }}</template>
          </el-table-column>
          <el-table-column label="是否合并主产品">
            <template #default="scope">
              <span v-if="scope.row.isMain">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination v-model:current-page="currentPage5" v-model:page-size="pageSize5" :page-sizes="[10, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper" :total="totals" @size-change="handleSizeChanges"
            @current-change="handleCurrentChanges" />
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { productMergeLogsearch, listByProductMergeLogId } from '@/api/index'
onBeforeMount(() => {
  getList()
})
const dialogVisible = ref(false)
const tableData = ref([{
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles'
}])
const sonIds = ref([])
const lookMergeLog = (row) => {
  sonIds.value = row.id
  getListSon(sonIds.value)
  console.log(row)
  dialogVisible.value = true
}
// form
const form = ref({
  pageSize: 10,
  pageNum: 1
})
const getList = () => {
  productMergeLogsearch(form.value).then(res => {
    const { data: { data } } = res
    total.value = data.total
    tableData.value = data.list
  })
}
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  form.value.pageNum = val
  getList()
}
const productMergeLogProductSearchParam = ref({
  pageSize: 10,
  pageNum: 1
})
// 分页
const currentPage5 = ref(1)
const pageSize5 = ref(10)
const totals = ref(0)
const handleSizeChanges = (val) => {
  console.log(`${val} items per page`)
  productMergeLogProductSearchParam.value.pageSize = val
  getListSon(sonIds.value)
}
const handleCurrentChanges = (val) => {
  console.log(`current page: ${val}`)
  productMergeLogProductSearchParam.value.pageNum = val
  getListSon(sonIds.value)
}
const tableDatas = ref([])
const getListSon = (row) => {
  listByProductMergeLogId(row, productMergeLogProductSearchParam.value).then(res => {
    const { data: { data } } = res
    totals.value = data.total
    tableDatas.value = data.list
  })
}
</script>

<style lang='less' scoped></style>
